"use strict";
import * as React from 'react';
const { View, ScrollView, StyleSheet, StatusBar, TouchableOpacity } = require('react-native');
const { connect } = require('react-redux');
const NavigationBar = require('react-native-navbar').default;
const { List } = require('antd-mobile');
const { Actions } = require("react-native-router-flux");
import { autoSize, commonStyles } from "../../assets/styles/common";
import WhiteSpace from "../../component/WhiteSpace";
import Colors from "../../assets/styles/Colors";
import { SCREEN_WIDTH } from "../../constant";
import Avatar from "../../component/Avatar";
import MyText from "../../component/MyText";
class Member extends React.Component {
    constructor() {
        super(...arguments);
        this.goTo = (sceneKey, props) => {
            Actions.push(sceneKey, props);
        };
        this.signOut = () => {
            this.props.dispatch({ type: 'auth/signOut' });
        };
        this.getTip = () => {
            let tip = '您已用完所有内含配额。按每个配额¥160的价格预订跟多房间';
            if (Number(this.props.auth.userInfo.paid) > 0) {
                tip = `您现在可用配额为${this.props.auth.userInfo.paid}。`;
            }
            return tip;
        };
        this.renderHeader = () => {
            return (<View style={[commonStyles.centerVH, {
                    width: SCREEN_WIDTH,
                    height: autoSize(208),
                    backgroundColor: Colors.Primary
                }]}>
                <TouchableOpacity onPress={Actions.userProfile.bind(this, {
                canEdit: true,
                userInfo: this.props.auth.userInfo,
                createdType: 'edit'
            })}>
                    <Avatar source={{ uri: this.props.auth.userInfo.avatar + '' }} style={[commonStyles.centerVH]} size={100}/>
                </TouchableOpacity>

                <MyText color={Colors.White} fontSize={20} style={{ marginTop: 10 }}>{this.props.auth.userInfo.nickName}</MyText>
            </View>);
        };
    }
    componentDidMount() {
    }
    render() {
        return (<View style={commonStyles.container}>
                <StatusBar barStyle="light-content"/>
                <View style={{ height: 20, backgroundColor: Colors.Primary }}/>
                <ScrollView>
                    <List renderHeader={this.renderHeader}>
                        <View style={[commonStyles.flexRow, { padding: 10 }]}>
                            <Avatar source={{ uri: this.props.auth.userInfo.avatar }} circle={false} size={autoSize(65)}/>
                            <View style={[commonStyles.flex1, { marginLeft: 10, justifyContent: 'center' }]}>
                                <MyText>{this.props.auth.userInfo.nickName}</MyText>
                                <MyText>{this.props.auth.userInfo.company.name}</MyText>
                            </View>
                        </View>
                        <View style={[{ padding: 10, borderBottomWidth: 0.5, borderBottomColor: Colors.Background }]}>
                            <MyText color={Colors.SubTitle} fontSize={14}>预定配额</MyText>
                            <MyText color={Colors.Title} numberOfLines={0} style={{ marginTop: 5 }} fontSize={16}>{this.getTip()}</MyText>
                        </View>
                        <List.Item arrow='horizontal' onClick={this.goTo.bind(this, 'printerUsage')}>打印用法</List.Item>
                        <List.Item arrow='horizontal' onClick={this.goTo.bind(this, 'invoiceList')}>查看发票</List.Item>
                        <WhiteSpace color={Colors.Background}/>
                        <List.Item arrow='horizontal' onClick={this.goTo.bind(this, 'configNoticePage')}>配置通知</List.Item>
                        <List.Item arrow='horizontal' onClick={this.goTo.bind(this, 'changePassword')}>修改密码</List.Item>
                        <WhiteSpace color={Colors.Background}/>
                        <List.Item arrow='horizontal' onClick={this.goTo.bind(this, 'support')}>支持</List.Item>
                        <List.Item arrow='horizontal' onClick={this.goTo.bind(this, 'about')}>关于</List.Item>
                        <List.Item arrow='horizontal' onClick={this.signOut}>退出</List.Item>
                    </List>
                </ScrollView>

            </View>);
    }
}
const styles = StyleSheet.create({
    container: {
        display: 'flex',
        flex: 1,
        backgroundColor: '#efefef'
    }
});
export default connect(({ auth }) => ({ auth }))(Member);
